<template>
	<view class="content" :style="'height:'+ this.h+'rpx'">
		<!-- 登录页背景图片 -->
		<view>
			<image class='background-image' src='/static/img/background1.png' mode="aspectFill"></image>
		</view>
		<!-- 标题 -->
		<view style="font-size: 44rpx; text-align: center;color: #fff;">中国-东盟在线课程资源平台</view>
		<!-- 主体部分 -->
		<view class="login_1">
			<view class="login_2" style="padding-top: 60rpx;">
				<view style="font-size: 40rpx; text-align: center;color: #1E90FF; font-weight:bold;">登录</view>

				<!-- 账号输入框 -->
				<view class="login_input">
					<view class="box01">
						<input type="text" v-model="username" class="input_user" placeholder="请输入账号">
					</view>
					<view class="box01">
						<input type="password" v-model="password" class="input_pad" placeholder="请输入密码">
					</view>
				</view>


				<!-- 登录按钮 -->
				<view style="margin-top: 40rpx;">
					<!-- @tap="submit" -->
					<button style="background-color: #1E90FF;color: white;"
						@click="login">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
				</view>
				<view>
					<navigator style="margin: 85rpx 0;color: #1E90FF;text-align: center;font-size: 30rpx;">忘记密码?
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "S2015253020",
				password: "123456",
				h: null,
			}
		},
		methods: {
			async login() {
				let that = this;
				const res = await that.$myRequest({
					url: '/api/frontend/mobile/login',
					data: {
						username: that.username,
						password: that.password
					},
				})
				console.log(res)
				if (res.success) {
					uni.clearStorage();
					uni.setStorageSync('student_access_token', res.data)
					console.log(uni.getStorageSync('student_access_token'))
					this.getLoginInfo()
					uni.reLaunch({
						url: 'pages/index/index'
					})
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				}
			},
			//获取用户信息
			async getLoginInfo() {
				let that = this;
				const res = await that.$myRequest({
					url: '/api/mobile/schoolstudent/session',
				})
				if (res.success) {
					if (res.code == 200) {
						console.log('登录成功： ' + JSON.stringify(res));
						uni.setStorageSync('username', res.data.name)
						uni.setStorageSync('userId', res.data.userId)
						uni.setStorageSync('sex', res.data.sex)
						uni.setStorageSync('birth', res.data.birth)
						uni.setStorageSync('tel', res.data.tel)
						uni.setStorageSync('classId', res.data.classId)
						uni.setStorageSync('studentNumber', res.data.studentNumber)
						uni.setStorageSync('address', res.data.address)
						uni.setStorageSync('national', res.data.national)
						uni.reLaunch({
							url: '../index/index'
						})
					} else {
						that.quit();
					}
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				}
			},
			async tokenGet(student_access_token) {
				console.log("tokenGet:" + student_access_token)
				let that = this;
				uni.request({
					url: 'http://120.79.0.124:8071/api/mobile/schoolstudent/session',
					method: "GET",
					data: {
						student_access_token: student_access_token
					},
					success: res => {
						console.log(res);
						return res.data.success;
					}
				})
			},
			async quit() {
				const res = await this.$myRequest({
					url: '/api/mobile/schoolstudent/logout'
				})
				console.log(res);
				if (res.success) {
					uni.removeStorageSync('student_access_token');
				} else {
					uni.showToast({
						title: '退出失败'
					})
				}
			},
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					// console.log("手机可用高度:" + res.windowHeight * 2 + "rpx");
					// this.$store.commit('set_window_height', res.windowHeight * 2);
					this.h=uni.getSystemInfoSync().windowHeight-uni.upx2px(810);
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	/* 账号密码输入框盒子 */
	.login_1 {
		width: 91%;
		height: 750rpx;
		margin: 60rpx auto;
		background-color: white;
		border-radius: 15px;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
	}

	/* 内框（用于调整输入框） */
	.login_2 {
		margin: 0 auto;
		width: 90%;
	}

	.input_user {
		background-image: url("@/static/img/user.png");
		background-repeat: no-repeat;
		background-position: 11px 11px;
		background-size: 25px 25px;
	}

	.input_pad {
		background-image: url("@/static/img/mima.png");
		background-repeat: no-repeat;
		background-position: 11px 11px;
		background-size: 25px 25px;

	}

	.login_input {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login_input input {
		width: 533rpx;
		height: 90rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		outline: 0;
		color: #000;
		border: 1px solid #999999;
		border-radius: 5px;
		padding: 0 0 0 45px;
	}

	/* 登录页背景图片 */
	.background-image {
		height: 100%;
		position: absolute;
		width: 100%;
		left: 0rpx;
		top: 0rpx;
		z-index: -1;
	}

	/* 单选钮样式 */
	radio {
		transform: scale(0.6);
	}
</style>
